<script setup lang="ts">
import { ref } from 'vue'
import AIProductHeader from './components/AIProductHeader.vue'
import TemplateGrid from './components/TemplateGrid.vue'
import TemplatePreview from './components/TemplatePreview.vue'
import SearchFilter from './components/SearchFilter.vue'

// 定义模板接口
interface Template {
  id: string;
  name: string;
  image: string;
  techStack: string[];
  description: string;
  details?: {
    features: string[];
    screens: string[];
  }
}

// 控制预览弹窗显示
const showPreview = ref(false)
const selectedTemplate = ref<Template | null>(null)

// 打开预览弹窗
const openPreview = (template: Template) => {
  selectedTemplate.value = template
  showPreview.value = true
  console.log('打开预览弹窗', template)
}

// 关闭预览弹窗
const closePreview = () => {
  showPreview.value = false
}

// 创建新项目
const createProject = (template: Template) => {
  console.log('创建项目:', template)
  // 这里可以添加创建项目的逻辑
  showPreview.value = false
}
</script>

<template>
  <div class="ai-product-container">
    <!-- 页面标题和副标题 -->
    <AIProductHeader />
    
    <!-- 搜索和筛选区域 -->
    <SearchFilter />
    
    <!-- 模板网格展示区域 -->
    <TemplateGrid @select-template="openPreview" />
    
    <!-- 模板预览弹窗 -->
    <TemplatePreview 
      v-if="showPreview && selectedTemplate" 
      :template="selectedTemplate"
      @close="closePreview"
      @create="createProject"
    />
  </div>
</template>

<style>
body {
  margin: 0;
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background-color: #f5f7fa;
  color: #333;
  display: block;
  min-height: 100vh;
}

.ai-product-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}
</style>
